<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>人员选择器 | 开发文档汇总</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/docs-page/img/favicon.ico">
    <meta name="description" content="沉淀与共享优秀知识，构建你的个人笔记和知识管理体系">
    <meta name="keywords" content="vuepress,theme,blog,vdoing">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/docs-page/assets/css/0.styles.add5310c.css" as="style"><link rel="preload" href="/docs-page/assets/js/app.55c5d12e.js" as="script"><link rel="preload" href="/docs-page/assets/js/2.779389ce.js" as="script"><link rel="preload" href="/docs-page/assets/js/5.7156b0c2.js" as="script"><link rel="prefetch" href="/docs-page/assets/js/10.6b2752d1.js"><link rel="prefetch" href="/docs-page/assets/js/11.665728da.js"><link rel="prefetch" href="/docs-page/assets/js/12.c0483a48.js"><link rel="prefetch" href="/docs-page/assets/js/13.be56989b.js"><link rel="prefetch" href="/docs-page/assets/js/14.a537673a.js"><link rel="prefetch" href="/docs-page/assets/js/15.e50f0979.js"><link rel="prefetch" href="/docs-page/assets/js/16.59140c87.js"><link rel="prefetch" href="/docs-page/assets/js/17.dcfd7b8f.js"><link rel="prefetch" href="/docs-page/assets/js/18.98f0d810.js"><link rel="prefetch" href="/docs-page/assets/js/19.14428f34.js"><link rel="prefetch" href="/docs-page/assets/js/20.8a30f381.js"><link rel="prefetch" href="/docs-page/assets/js/21.93b165ff.js"><link rel="prefetch" href="/docs-page/assets/js/22.119d2e01.js"><link rel="prefetch" href="/docs-page/assets/js/23.9f194a0c.js"><link rel="prefetch" href="/docs-page/assets/js/24.10650c5a.js"><link rel="prefetch" href="/docs-page/assets/js/3.6d382cc7.js"><link rel="prefetch" href="/docs-page/assets/js/4.5ff68b1c.js"><link rel="prefetch" href="/docs-page/assets/js/6.cad982ef.js"><link rel="prefetch" href="/docs-page/assets/js/7.45321ddd.js"><link rel="prefetch" href="/docs-page/assets/js/8.215ac689.js"><link rel="prefetch" href="/docs-page/assets/js/9.267153a5.js">
    <link rel="stylesheet" href="/docs-page/assets/css/0.styles.add5310c.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs-page/" class="home-link router-link-active"><img src="/docs-page/img/logo.png" alt="开发文档汇总" class="logo"> <span class="site-name can-hide">开发文档汇总</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs-page/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端开发文档" class="dropdown-title"><!----> <span class="title" style="display:;">前端开发文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs-page/pages/e3662d/" class="nav-link">自定义组件</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码片段" class="dropdown-title"><a href="/docs-page/pages/1651d9/" class="link-title">代码片段</a> <span class="title" style="display:none;">代码片段</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">React</a></li></ul></div></div><div class="nav-item"><a href="/docs-page/pages/471d56/" class="nav-link">前端体系</a></div><div class="nav-item"><a href="/docs-page/pages/dda99c/" class="nav-link">效率工具</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="常用框架" class="dropdown-title"><!----> <span class="title" style="display:;">常用框架</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.avuejs.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  avuejs
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  elementUI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/docs-page/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端开发文档" class="dropdown-title"><!----> <span class="title" style="display:;">前端开发文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs-page/pages/e3662d/" class="nav-link">自定义组件</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码片段" class="dropdown-title"><a href="/docs-page/pages/1651d9/" class="link-title">代码片段</a> <span class="title" style="display:none;">代码片段</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/docs-page/pages/26073e/404" class="nav-link">React</a></li></ul></div></div><div class="nav-item"><a href="/docs-page/pages/471d56/" class="nav-link">前端体系</a></div><div class="nav-item"><a href="/docs-page/pages/dda99c/" class="nav-link">效率工具</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="常用框架" class="dropdown-title"><!----> <span class="title" style="display:;">常用框架</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.avuejs.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  avuejs
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  elementUI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>自定义组件</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>学籍学历系统</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs-page/pages/26073e/" aria-current="page" class="active sidebar-link">人员选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs-page/pages/f70ee5/" class="sidebar-link">图标选择器</a></li><li><a href="/docs-page/pages/2a5882/" class="sidebar-link">人员详情组件</a></li><li><a href="/docs-page/pages/e6a275/" class="sidebar-link">全局dialog组件</a></li></ul></section></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/docs-page/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><span data-v-06225672>前端开发文档</span></li><li data-v-06225672><span data-v-06225672>自定义组件</span></li><li data-v-06225672><span data-v-06225672>学籍学历系统</span></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="javascript:;" data-v-06225672>RenYongQiang</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2023-10-11</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">人员选择器<!----></h1>  <div class="theme-vdoing-content content__default"><div class="custom-block danger"><p class="custom-block-title">警告</p> <p>目前暂不支持 <code>npm i @qianhang/userselector</code> 的方式，</p> <p>请将组件引入到页面中 <code>import UserSelector from &quot;@/components/componentsFactory/UserSelector&quot;;</code>, 并注册，然后使用方法看“页面中使用”</p></div> <h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <div class="language-html extra-class"><pre class="language-html"><code>npm i @qianhang/userselector
</code></pre></div><h3 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h3> <h4 id="main-js中添加如下代码"><a href="#main-js中添加如下代码" class="header-anchor">#</a> main.js中添加如下代码</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> UserSelector <span class="token keyword">from</span> <span class="token string">'@qianhang/userselector'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'@qianhang/userselector/styles/UserSelector.css'</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>UserSelector<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="接口添加"><a href="#接口添加" class="header-anchor">#</a> 接口添加</h4> <p>在src/api下新建文件夹componentsApi，在该文件夹下新建文件userselector.js文件</p> <div class="language-js extra-class"><pre class="language-js"><code>
<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/router/axios'</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">'/api/blade-system'</span><span class="token punctuation">;</span>
<span class="token comment">// 查询组织树</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getOrgsTree</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> url <span class="token operator">+</span> <span class="token string">'/dept/tree-allData'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 查询角色树</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getRoleTree</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> url <span class="token operator">+</span> <span class="token string">'/role/list-selector'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 通过id查人员列表</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getByIdAndUserName</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">current<span class="token punctuation">,</span> size<span class="token punctuation">,</span> params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> url <span class="token operator">+</span> <span class="token string">'/user/getPageByDeptIdAndUserName'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token operator">...</span>params<span class="token punctuation">,</span>
      current<span class="token punctuation">,</span>
      size<span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 查询上下级树</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getSupSubTree</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> url <span class="token operator">+</span> <span class="token string">'/orgAttachedDefinition/getOrgAttachedTree'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="页面中使用"><a href="#页面中使用" class="header-anchor">#</a> 页面中使用</h4> <div class="custom-block danger"><p class="custom-block-title">警告</p> <p>当 <code>xxx.queryPersonnel = true;</code> 时，请务必配置 <code>personnelOptions</code>，否则报错！</p></div> <div class="language-vue extra-class"><pre class="language-vue"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>UserSelector</span>
  <span class="token attr-name">:userSelectorOptions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userSelectorOptions<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:getOrgsTree</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getOrgsTree<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:getRoleTree</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getRoleTree<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:getByIdAndUserName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getByIdAndUserName<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:initData</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>initData<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.selected<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:extraObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@submitHandler</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submitHandler<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@removeTag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>removeTagHandler<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@before-open</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onBeforeOpen<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  getOrgsTree<span class="token punctuation">,</span>
  getRoleTree<span class="token punctuation">,</span>
  getByIdAndUserName<span class="token punctuation">,</span>
  getSupSubTree
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/api/componentsApi/userselector&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">userSelectorOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">is</span><span class="token operator">:</span> <span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token comment">// input: 输入框、button：按钮</span>
        <span class="token literal-property property">btnType</span><span class="token operator">:</span> <span class="token string">'primary'</span><span class="token punctuation">,</span> <span class="token comment">// 按钮类型： 同el-button的type属性，默认为primary，当is为’button‘的时候配置；</span>
        <span class="token literal-property property">btnIcon</span><span class="token operator">:</span> <span class="token string">'el-icon-view'</span><span class="token punctuation">,</span> <span class="token comment">// 按钮ICON，默认为空</span>
        <span class="token literal-property property">btnText</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 按钮文本，当is为‘button’的时候必填</span>
        <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">'small'</span><span class="token punctuation">,</span> <span class="token comment">// 回显框的大小：medium/small/mini,默认值为small</span>
        <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token comment">// dialog的宽度：默认值为1000px</span>
        <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否冻结select，默认值为false</span>
        <span class="token literal-property property">classifyOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 大分类配置</span>
          <span class="token literal-property property">orgsOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 组织配置</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'orgs'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">checkbox</span><span class="token operator">:</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">firm</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 公司是否可选，默认值为true</span>
              <span class="token literal-property property">dept</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 部门是否可选, 默认值为 true</span>
              <span class="token literal-property property">post</span><span class="token operator">:</span> <span class="token boolean">true</span>  <span class="token comment">// 岗位是否可选, 默认值为 true</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token literal-property property">queryPersonnel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否查询人员，默认值为true</span>
            <span class="token literal-property property">showPost</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>  <span class="token comment">// 是否显示岗位, 默认值为false</span>
            <span class="token literal-property property">multiple</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token comment">// 是否多选, 默认值为true</span>
            <span class="token literal-property property">findPart</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否查部分(根据不同账号查本级及以下)，默认值为false</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">roleOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 角色配置</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'role'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">checkbox</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否可选，默认值为true</span>
            <span class="token literal-property property">multiple</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否多选，默认值为true</span>
            <span class="token literal-property property">queryPersonnel</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否查询人员，默认值为true</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">personnelOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 人员配置</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'personnel'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">multiple</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否多选，默认值为true</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">supSubOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'supSub'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">queryPersonnel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否查询人员，该配置项始终为false</span>
            <span class="token literal-property property">multiple</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否多选，默认为true</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      getOrgsTree<span class="token punctuation">,</span> <span class="token comment">// 查询组织Tree</span>
      getRoleTree<span class="token punctuation">,</span> <span class="token comment">// 查询角色Tree</span>
      getByIdAndUserName<span class="token punctuation">,</span> <span class="token comment">// 查询人员列表</span>
      getSupSubTree<span class="token punctuation">,</span>
      <span class="token literal-property property">initData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 初始化数据</span>
      <span class="token literal-property property">form</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> 
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">row</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// 额外参数</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">submitHandler</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 点击“确认”按钮返回的已选择数据</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'选中的数据'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'接收到的额外参数'</span><span class="token punctuation">,</span> row<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">removeTagHandler</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'被删除item的id'</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">onBeforeOpen</span><span class="token punctuation">(</span><span class="token parameter">callback<span class="token punctuation">,</span> row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//默认打开</span>
      <span class="token function">callback</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//禁止打开</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'额外参数'</span><span class="token punctuation">,</span> row<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div>  <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2024/02/02, 17:40:37</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><!----> <a href="/docs-page/pages/f70ee5/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">图标选择器</div></a></div> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/docs-page/pages/f70ee5/">图标选择器</a>→
      </span></p></div></div></div> <!----></main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2023-2024
    <span>全菜工程师 | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div class="kanbanniang" data-v-5775ee02><div class="banniang-container" style="display:;" data-v-5775ee02><div class="messageBox" style="right:68px;bottom:190px;display:none;" data-v-5775ee02>
      欢迎来到 开发文档汇总
    </div> <div class="operation" style="right:90px;bottom:40px;display:none;" data-v-5775ee02><i class="kbnfont kbn-ban-home ban-home" data-v-5775ee02></i> <i class="kbnfont kbn-ban-message message" data-v-5775ee02></i> <i class="kbnfont kbn-ban-close close" data-v-5775ee02></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-5775ee02><i class="kbnfont kbn-ban-info info" data-v-5775ee02></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:none;" data-v-5775ee02></i></div> <canvas id="banniang" width="210" height="308" class="live2d" style="right:90px;bottom:-20px;opacity:0.9;" data-v-5775ee02></canvas></div> <div class="showBanNiang" style="display:none;" data-v-5775ee02>
    看板娘
  </div></div><canvas id="vuepress-canvas-cursor"></canvas></div></div>
    <script src="/docs-page/assets/js/app.55c5d12e.js" defer></script><script src="/docs-page/assets/js/2.779389ce.js" defer></script><script src="/docs-page/assets/js/5.7156b0c2.js" defer></script>
  </body>
</html>
